<template>
  <u-button
    @click="onClickButton"
    :custom-style="customStyle"
    :hair-line="false"
    :type="type"
    :size="size"
    :disabled="disabled"
    :loading="loading"
    shape="circle"
    throttle-time="0"
  >
    <slot></slot>
  </u-button>
</template>

<script>
// 定时器
let timer = false;

/**
 * 按钮
 * @property {Object} custom-style 按钮的自定义样式
 * @property {String} type 按钮的类型
 * @property {String} size 按钮的大小
 * @property {Boolean} hasLoad 具有加载效果
 *                             当按钮点击之后，需要执行耗时的任务时使用。
 *                             因为耗时的任务，需要时间才能完成，那么等待的时间，
 *                             需要给予用户反馈，让用户知道我们的应用，并没有卡顿，
 *                             当hasLoad为真的时候，点击按钮之后，首先按钮会被禁止点击，
 *                             避免用户多次点击按钮，触发多次任务操作。
 *                             然后，800毫秒之后，若任务还没有结束，则按钮会出现加载中效果，
 *                             耗时的任务结束之后，
 *                             需要配合loadComplete、continueBanAfterLoadComplete使用，
 *                             才能取消加载效果
 * @event {Function} click 按钮点击事件
 */
export default {
  name: 'y-button',

  props: {
    // 按钮自定义样式
    customStyle: {
      type: Object,
      default() {
        return {
          border: 'none',
          margin: '20rpx 30rpx',
        };
      },
    },

    // 按钮的类型
    type: {
      type: String,
      default: 'primary',
    },

    // 按钮的大小
    size: {
      type: String,
      default: 'default',
    },

    // 具有加载效果
    hasLoad: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      // 按钮是否显示加载中效果
      loading: false,

      // 按钮禁止是否禁止
      disabled: false,
    };
  },

  methods: {
    /**
     * 点击按钮
     */
    onClickButton() {
      if (this.hasLoad) {
        this.disabled = true;
        timer = setTimeout(() => {
          this.loading = true;
        }, 800);
      }

      this.$emit('click');
    },

    /**
     * 加载完成
     * 配合hasLoad为真时使用
     * 调用此方法，取消加载中效果，启用按钮
     * 一般用于按钮操作完成之后，还想用户能给继续点击
     */
    loadComplete() {
      this.loading = false;
      clearTimeout(timer);
      this.disabled = false;
    },

    /**
     * 加载完成之后，继续禁止按钮
     * 配合hasLoad为真时使用
     * 调用此方法，取消加载种效果，但依然保持禁止按钮的状态
     * 一般用于按钮操作完成之后，不想要用户，还能继续点击
     */
    continueBanAfterLoadComplete() {
      this.loading = false;
      clearTimeout(timer);
    },
  },
};
</script>
